<template>
    <div id="view_dashboard" class="home-page-contianer">
        <div class="grid-row col-2">
            <vc_serviceStatus />
            <vc_systemStatus />
        </div>
        <div class="grid-row" style="margin: var(--gap_width) 0">
             <vc_systemInfo/>
        </div>
        <div class="grid-row" style="margin: var(--gap_width) 0">
            <vc_diskStatus />
        </div>
        <div class="grid-row col-3 col-bottom">
            <vc_userAccessNumber />
            <vc_userAccessChart />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import vc_serviceStatus from './vc_serviceStatus.vue'
import vc_systemStatus from './vc_systemStatus.vue'
import vc_systemInfo from './vc_systemInfo.vue'
import vc_diskStatus from './vc_diskStatus.vue'
import vc_userAccessNumber from './vc_userAccessList.vue'
import vc_userAccessChart from './vc_userAccessChart.vue'
const b = ref('')
</script>

<style lang="scss">
@use '@/assets/style/sea-viewport';
@use '@/components/framework/framework';
#view_dashboard {
    --gap_width: 1rem;
    --max_width_2items: calc(50% - var(--gap_width) / 2);
    --max_width_3items: calc(33.3% - var(--gap_width) / 1.5);
    //box-sizing: border-box;
    //margin: 0.75rem;
    padding: 0.25rem;
    border: none;
    gap: 0.875rem var(--gap_width);

    .grid-row {
        display: grid;
        gap: inherit;
        grid-template-columns: 1fr;
        //grid-template-rows: min-content;
        //height: min-content;
        @media (min-width: sea-viewport.$phone_min) {
            &.col-2 {
                grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
            }
            &.col-3 {
                grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
            }
        }
        /*&.col-bottom {
            @media (min-width: 1627px) {
                height: calc(framework.$framework_content_height - (0.25rem * 2) - 184px - 53px - 2rem);
            }
            @media (min-width: 1377px) and (max-width: 1626px) {
                height: calc(framework.$framework_content_height - (0.25rem * 2) - 320px - 53px - 2rem);
            }
        }*/
       
    }
}
</style>
